import React, {Component} from 'react';
import {Menu, Icon, Layout, Badge, Avatar, Dropdown} from 'antd';
const {Header} = Layout;
const MenuItemGroup = Menu.ItemGroup;

class HeaderCustom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '测试'
        }
    }

    componentDidMount() {
        // const QueryString = queryString();

        // if (QueryString.hasOwnProperty('code')) {
        //     console.log(QueryString);
        //     const _user = JSON.parse(localStorage.getItem('user'));
        //     !_user && gitOauthToken(QueryString.code).then(res => {
        //         console.log(res);
        //         gitOauthInfo(res.access_token).then(info => {
        //             this.setState({
        //                 user: info
        //             });
        //             localStorage.setItem('user', JSON.stringify(info));
        //         });
        //     });
        //     _user && this.setState({
        //         user: _user
        //     });
        // }
        // const _user = JSON.parse(localStorage.getItem('user')) || '测试';
        // if (!_user && QueryString.hasOwnProperty('code')) {
        //     gitOauthToken(QueryString.code).then(res => {
        //         gitOauthInfo(res.access_token).then(info => {
        //             this.setState({
        //                 user: info
        //             });
        //             localStorage.setItem('user', JSON.stringify(info));
        //         });
        //     });
        // } else {
        //     this.setState({
        //         user: _user
        //     });
        // }
    };

    menuClick(e) {
        console.log(e);
        e.key === 'logout' && this.logout();
    };

    logout() {
        localStorage.removeItem('user');
        this.props.router.push('/login')
    };

    render() {
        return (
            <Header style={{background: '#fff', padding: 0, height: '64px',}} className="custom-theme">

                <span style={{lineHeight: '64px', float: 'right'}}>

                    <span style={{marginRight: '40px'}}>
                        <Badge count={25} style={{}}>
                            <Icon type="notification" style={{fontSize: '20px',}}/>
                        </Badge>
                    </span>

                    <Dropdown overlay={
                        <Menu style={{
                            lineHeight: '24px',
                            paddingRight: '10px',
                            paddingLeft: '10px',
                            marginRight: '10px',
                            marginTop: '10px'
                        }}>
                            <MenuItemGroup>
                                <Menu.Item key="userInfo">个人中心</Menu.Item>
                                <Menu.Item key="logout"><span onClick={this.logout}>退出登录</span></Menu.Item>
                            </MenuItemGroup>
                        </Menu>}>
                        <span className="ant-dropdown-link" style={{paddingRight: '20px', color: 'black'}}>
                            <Avatar style={{
                                backgroundColor: '#87d068',
                                margin: '0px 10px 0px 10px',
                                verticalAlign: 'middle'
                            }} icon="user"/>
                            <Icon type="down"/>
                        </span>
                    </Dropdown>
                </span>
            </Header>
        )
    }
}

export default HeaderCustom;